<template>
  <div>
    <div class="top">
      <img :src="require('@/assets/img/ccblogo.svg')" alt="" width="80" class="logo">
      <span class="son-bank">中国建设银行<span>滨湖新区支行</span></span>
      <span class="en-bank">China Construction Bank Hefei Binhu New District Subbranch</span>
      <span class="time-hm">{{ timer.hm }}</span>
      <span class="time-week">{{ timer.week }}</span>
      <span class="time-ymd">{{ timer.ymd }}</span>
    </div>
    <div class="content-daolan">
      <div class="left">
        <canvasMove :cId="s.pos" v-for="(s,i) of areaList" :key="i" v-if="s.canvasShow" :movePos="s.movePos"/>
        <div class="content-inner">
          <el-popover
              placement="bottom"
              @show="hiddenOther(i)"
              @hide="showAll"
              width="400"
              v-for="(s,i) of areaList"
              :key="i"
              popper-class="popper-class"
              :visible-arrow="false"
              trigger="click">
            <div class="tit">
              {{ s.area }} <span style="font-size: 12px;">{{ s.enName }}</span>
            </div>
            <div class="s-children">
              {{ s.children[0] }} <span style="font-size: 12px;">{{ s.children[1] }}</span>
            </div>
            <div :class="['con-item',s.pos]" slot="reference" :style="{opacity}" v-show="s.show">{{ s.area }} <br/><span
                style="font-size: 12px;">{{ s.enName }}</span><i class="el-icon-caret-bottom"></i></div>
          </el-popover>
        </div>
      </div>
      <div class="right">
        <div v-for="(s,i) of areaList" :key="i" class="right-item" @click="hiddenOther(i,true)">
          {{ s.area }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import dayjs from 'dayjs'
import relativeTime from "dayjs/plugin/relativeTime"
import 'dayjs/locale/zh-cn'

dayjs.locale('zh-cn')
dayjs.extend(relativeTime);
import canvasMove from "@/views/canvasMove";

export default {
  name: "daolan.vue",
  components: {canvasMove},
  data() {
    let areaList = [
      {
        movePos: [150, 400],
        area: "24小时自助银行服务区",
        enName: "24-Hour Self-Service Area",
        children: ["是指为客户提供7×24小时自助服务的设备区域。", "Offering 24-Hour Self Banking Service"],
        pos: 'hours24'
      },
      {
        movePos: [0, 0],
        area: "咨询引导区",
        enName: "Consulting And Guidance Area",
        children: ["是指为客户提供答疑、自助填单、取号和引导的区域。", "Offering Service Information and Oueuing Number"],
        pos: 'zixunyindao'
      },
      {
        movePos: [1100, 440],
        area: "电子银行服务区",
        enName: "Electronic Banking Service Area",
        children: ["是指为客户提供电子银行产品体验和服务、与客户互动的区域。", "Offering Electronic Banking Service including Internet Banking and Mobilephone Banking,etc"],
        pos: 'dianziyinhang'
      },
      {
        movePos: [850, 730],
        area: "智能银行服务区",
        enName: "Intelligent Banking Service Area",
        children: ["是指以新一代超级柜台为核心的智能设备服务区域。", "Offering Non-Cash Self Banking Service"],
        pos: 'zhinengyinhang'
      },
      {
        movePos: [350, 500],
        area: "客户等候区",
        enName: "Customer Waiting Area",
        children: ["提供客户休息等候，便民服务设施区域", "Customer Waiting"],
        pos: 'kehudenghou'
      },
      {
        movePos: [700, 400],
        area: "现金服务区",
        enName: "Cash Business Service Area",
        children: ["是指处理以现金业务为主的全部柜面业务的区域。", "Cash Service Counter"],
        pos: 'xianjinfuwu'
      },
      {
        movePos: [440, 200],
        area: "贵宾现金服务区",
        enName: "VIP Cash Business Service Area",
        children: ["是指为贵宾客户提供以现金业务为主的业务区域。", "VIP and Reserved Cash Service"],
        pos: 'guibinxianjinfuwu'
      },
      {
        movePos: [1000, 300],
        area: "非现金服务区",
        enName: "Non-Cash Business Service Area",
        children: ["作为智能服务区的功能补充，受理智能服务区无法处理的非现金柜面业务，也是网点销售人员进行产品推介、营销洽谈的服务区域。", "Corporate Banking and Non-Cash Service Counter"],
        pos: 'feixianjinfuwu'
      },
      {
        movePos: [360, 150],
        area: "贵宾服务区",
        enName: "VIP Cash Business Service Area",
        children: ["是指为对公和零售高价值客户提供专享服务的区域。", "VIP and Reserved Banking Service"],
        pos: 'guibinfuwu'
      },
      {
        movePos: [380, 50],
        area: "理财(代销)产品销售专区",
        enName: "Financial Management(CCB As Agency)Products Sales Area",
        children: ["提供理财(代销)产品销售服务", "私人银行业务", "Offering Wealth Management Products Sales Service"],
        pos: 'licaichanpin'
      },
      {
        movePos: [520, 350],
        area: "公众教育区",
        enName: "Public Education Area",
        children: ["普及金融知识、播放金融知识宣传短片、提供金融相关读物、维护消费者合法权益的重要功能区。", "Providing Consumer Protection and Financial Information"],
        pos: 'gongzhongjiaoyu'
      },
      {
        movePos: [550, 100],
        area: "消费者权益保护室",
        enName: "Consumer Rights Protection Office",
        children: ["放置消费者权益宣传资料，接待并处理消费者在银行办理业务时遇到的相关问题。", "Providing Information on The Protection of Consumer Rights and Interests, and Receive the Relevant Problems from Bank Customer."],
        pos: 'xiaofeizhequanyi'
      },
      {
        movePos: [400, 700],
        area: "便民服务区(劳动者港湾)",
        enName: "Convenient Service Area",
        children: ["为户外劳动者和客户提供便民服务设施", "Providing Convenience Services and Rest Place for Customer and Noncustomer."],
        pos: 'bianminfuwu'
      },
      {
        movePos: [230, 300],
        area: "图书角(悦览树)",
        enName: "Corner Library",
        children: ["提供各类书籍为客户借阅", "Offering Books for People to Borrow and Read."],
        pos: 'tushujiao'
      },
      {
        movePos: [820, 300],
        area: "公示区",
        enName: "Publicity Area",
        children: ["对重要信息进行公示", "Publicize Important Information."],
        pos: 'gongshiqu'
      },
      {
        movePos: [200, 700],
        area: "母婴室",
        enName: "Baby Care Room",
        children: ["提供母婴设施", "Providing Infant Facilities."],
        pos: 'muyingshi'
      },

    ];
    areaList.forEach(i => {
      i.show = true
      i.canvasShow = false
    })

    return {
      opacity: 1,
      timer: {
        ymd: '',
        hm: '',
        week: ''
      },
      interVal: null,
      areaList
    }

  },
  mounted() {
    this.getTime()
  },
  methods: {
    handleExecute(x, y) {
      // 获取canvas元素
      const canvas = document.querySelector('#myCanvas')
      // 获取canvas渲染上下文
      const ctx = canvas.getContext('2d')
      // 定义起点和终点的坐标
      const startX = 600
      const startY = 605
      let endX = x
      let endY = y
      let nextX
      let nextY
      // 第一帧执行的时间
      let startTime;
      // 期望动画持续的时间
      const duration = 3000

      // 创建路径
      ctx.beginPath()
      ctx.moveTo(startX, startY)
      // 设置线条样式
      ctx.strokeStyle = `rgba(${81}, ${160}, ${255},${0.25})`
      ctx.lineWidth = 4
      const step = (currentTime) => {

        !startTime && (startTime = currentTime)
        // 已经过去的时间(ms)
        const timeElapsed = currentTime - startTime
        // 动画执行的进度 {0,1}
        const progress = Math.min(timeElapsed / duration, 1)
        // 绘制方法
        const draw = () => {
          nextX = startX + (endX - startX) * progress
          nextY = startY + (endY - startY) * progress
          ctx.lineTo(nextX, nextY)
          ctx.stroke()
        }
        draw()
        if (progress < 1) {
          requestAnimationFrame(step)
        } else {
          ctx.clearRect(0, 0, 800, 800);
          this.handleExecute(x, y)
        }
      }
      requestAnimationFrame(step)
    },
    showAll() {
      this.opacity = 1
      this.areaList.forEach(i => {
        i.show = true
        i.canvasShow = false
      })
    },
    hiddenOther(i, show = false) {
      this.areaList.forEach(i => {
        if (i.area !== '咨询引导区') {
          i.show = false
          i.canvasShow = false
        } else {
          i.canvasShow = false
        }
      })
      this.areaList[i].show = true

      if (show) {
        this.opacity = 1
        if (this.areaList[i].area !== '咨询引导区') {
          this.areaList[i].canvasShow = true
        }
      } else {
        this.opacity = 0
        this.areaList[i].canvasShow = false
      }

    },
    getTime() {
      this.timer.ymd = dayjs().format("YYYY-MM-DD");
      this.timer.hm = dayjs().format('HH:mm');
      this.timer.week = dayjs().format('dddd');
      this.interVal = setInterval(() => {
        this.timer.ymd = dayjs().format("YYYY-MM-DD");
        this.timer.hm = dayjs().format('HH:mm');
        this.timer.week = dayjs().format('dddd');
      }, 60000);

    }
  },
  destroyed() {
    clearInterval(this.interVal);
  }
}
</script>

<style lang="scss">
#myCanvas {
  background: rgba(255, 255, 255, 0); /*关键点*/
  position: absolute;
  top: 0;
  left: 0;
}


.popper-class {
  padding: 0;
  border: 1px solid #245DAE;
}

.tit {
  text-align: center;
  background: #154A96;
  color: #fff;
  font-weight: bold;;
}

.s-children {
  padding-left: 10px;
  padding-right: 10px;
  text-indent: 20px;
  min-height: 50px;
  text-align: left;
  line-height: 20px;
}

@keyframes bounce-down {
  25% {
    transform: translateY(-2px) scale(1.01);
  }
  50%, 100% {
    transform: translateY(0) scale(1);
  }
  75% {
    transform: translateY(2px) scale(0.99);
  }
}

.top {
  height: 110px;
  position: relative;
  background: #fff;

  .logo {
    position: absolute;
    left: 45px;
    top: 20px;
  }

  .son-bank {
    font-size: 28px;
    position: absolute;
    left: 125px;
    top: 30px;
    font-weight: bold;
    span{
      margin-left: 5px;
      font-size: 24px;
    }
  }
  .en-bank{
    font-size: 18px;
    position: absolute;
    left: 125px;
    top: 65px;
    letter-spacing: -1px;
  }

  .time-hm, .time-week, .time-ymd {
    position: absolute;
    font-size: 24px;
    left: 1720px;
    font-weight: bold;

  }

  .time-hm {
    left: 1515px;
    top: 20px;
    font-size: 60px;
  }

  .time-week {
    top: 20px;

  }

  .time-ymd {
    top: 50px;
  }


}

.content-daolan {
  display: flex;

  .left {
    width: 1550px;
    position: relative;

    .content-inner {
      width: 1280px;
      height: 960px;
      margin: 0 auto;
      position: relative;
      background: url("../assets/img/daolan/daolan.png") no-repeat center -110px;


      .con-item {
        position: absolute;
        height: 47px;
        text-align: center;
        color: #fff;
        background: #245DAE;
        padding-left: 5px;
        padding-right: 5px;
        border-radius: 5px;
        z-index: 99;
        cursor: pointer;
        animation: bounce-down 3s linear infinite;


        i {
          font-size: 20px;
          color: #245DAE;
          position: absolute;
          bottom: -12px;
          left: 50%;
          transform: translateX(-50%);
        }


      }

      .hours24 {
        top: 380px;
        left: 100px;

      }

      .zixunyindao {
        left: 505px;
        top: 540px;

      }

      .dianziyinhang {
        right: 100px;
        top: 400px;
      }

      .zhinengyinhang {
        right: 300px;
        bottom: 200px;
      }

      .kehudenghou {
        left: 350px;
        top: 500px;
      }

      .xianjinfuwu {
        top: 400px;
        left: 600px;
      }

      .gongshiqu {
        top: 300px;
        left: 750px;
      }

      .feixianjinfuwu {
        right: 200px;
        top: 270px;
      }

      .guibinfuwu {
        top: 130px;
        left: 270px;
      }

      .guibinxianjinfuwu {
        top: 200px;
        left: 370px;
      }

      .licaichanpin {
        top: 30px;
        left: 210px;
      }

      .gongzhongjiaoyu {
        left: 450px;
        top: 310px;
      }

      .xiaofeizhequanyi {
        top: 80px;
        left: 440px;
      }

      .bianminfuwu {
        left: 300px;
        bottom: 240px;
      }

      .muyingshi {
        left: 180px;
        bottom: 240px;
      }

      .tushujiao {
        left: 190px;
        top: 260px;
      }


    }
  }


  .right {
    background: #154A96;
    width: 370px;

    .right-item {
      width: 340px;
      cursor: pointer;
      height: 53px;
      line-height: 53px;
      background: #245DAE;
      margin: 2px auto 0 auto;
      color: #fff;
      font-weight: bold;
      text-align: center;
      font-size: 20px;
    }
  }
}
</style>